<template>
	<view
		:style="'background: url(' + imgData.clockBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="false" bgColor="transparent" :fixed="false">
			<view @click="jumpPage('/pages/common/city')" url="/pages/common/city" class="u-nav-slot" slot="left">
				<u-icon name="arrow-down-fill" :label="cityName ? cityName : '加载中...'" labelPos="left" color="#fff" labelColor="#fff"
					size="12"></u-icon>
			</view>
		</u-navbar>
		<view class="p-30 flex-row justify-between align-center" v-if="configData.program == 1">
			<!-- <u-image @click="jumpPage('/pages/settle/vip')" showLoading :src="imgData.vipStaff" width="48%"
				height="100rpx" mode="widthFix"></u-image> -->
			<image @click="jumpPage('/pages/settle/vip')" :src="imgData.vipStaff" style="width: 48%;height: 100rpx;"
				mode="widthFix">
			</image>
			<image @click="jumpPage('/pages/settle/authentication?title=认证专区&check_state=1')" :src="imgData.clockStaff"
				style="width: 48%;height: 100rpx;" mode="widthFix"></image>
		</view>
		<view class="p-30" style="padding-bottom:120rpx">
			<view class="content p-30">
				<view class="">
					<u-scroll-list :indicator="false">
						<view class="tag" style="flex-direction: row;">
							<view class="tag-item" style="width: 120rpx;text-align: center;"
								@click.stop="tagClick(item)" :class="{'active':form.tag_id == item.id}"
								v-for="(item,index) in tagData">
								{{item.name}}
							</view>
						</view>
					</u-scroll-list>
					<view class="flex-row justify-between align-center mb-30">
						<view class="tag">
							<view class="tag-item" style="width: 120rpx;text-align: center;"
								@click.stop="tagClick1(index)" :class="{'active':index == form.condition}"
								v-for="(item,index) in tagItem2">
								{{item.title}}
							</view>
						</view>
						<view class="" @click="popupShow = true">
							<u-icon :name="xuan"></u-icon>
						</view>
					</view>
				</view>
				<view class="box mt-30">
				<template v-if="!noData">
					<view :class="{'mt-30':index != 0}" v-for="(item,index) in list">
						<staff-img :item="item"></staff-img>
					</view>
					<u-loadmore :status="status" />
				</template>
					<template v-else>
						<u-empty mode="data">
						</u-empty>
					</template>
				</view>
			</view>
			<u-popup :show="popupShow" @close="close" @open="open" mode="top" round="15" safeAreaInsetTop
				:safeAreaInsetBottom="false">
				<view class="popup">
					<view class="popup-title p-30 fw-700">
						筛选
					</view>
					<view class="popup-content">
						<view class="flex-row">
							<view class="popup-label size">
								年龄:
							</view>
							<view class="">
								<view class="tag flex-wrap">
									<view class="tag-item" @click="select(1,index)" style="margin-bottom: 10rpx;"
										:class="{'active':item.value == form.age}" v-for="(item,index) in ageData">
										{{item.title}}
									</view>
								</view>
							</view>
						</view>
						<view class="flex-row mt-30">
							<view class="popup-label size">
								身高:
							</view>
							<view class="">
								<view class="tag flex-wrap">
									<view class="tag-item" @click="select(2,index)" style="margin-bottom: 10rpx;"
										:class="{'active':item.value == form.height}"
										v-for="(item,index) in heightData">
										{{item.title}}
									</view>
								</view>
							</view>
						</view>
						<view class="flex-row mt-30">
							<view class="popup-label size">
								服务项目:
							</view>
							<view class="">
								<view class="tag flex-wrap">
									<view class="tag-item" @click="select(3,index)" style="margin-bottom: 10rpx;"
										:class="{'active':item.id == form.service_ids}"
										v-for="(item,index) in serveData1">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="popup-bottom flex-row justify-between align-center">
						<view @click="close()"
							class="popup-left popup-btn flex-sub flex-row align-center justify-center">
							取消
						</view>
						<view @click="init()"
							class="popup-right popup-btn flex-sub flex-row align-center justify-center">
							确认
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<page-tabbar :value="1" />
		<u-toast ref="uToast"></u-toast>
		<login ref="login" />
	</view>
</template>

<script>
	import {
		staffList
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				popupShow: false,
				tag_id: 0,
				condition: 0,
				tagItem1: [{
					'title': '全部'
				}, {
					'title': '只看未能解锁'
				}],
				tagItem2: [{
						'title': '综合排序'
					}, {
						'title': '预约最多'
					},
					// {
					// 	'title': '评价最高'
					// }
					// , {
					// 	'title': '只看未能解锁'
					// },
				],
				ageData: [{
					title: '全部',
					value: 0,
					checked: false
				}, {
					title: '18-21岁',
					value: 1,
					checked: false
				}, {
					title: '21-24岁',
					value: 2,
					checked: false
				}, {
					title: '24-28岁',
					value: 3,
					checked: false
				}, {
					title: '28岁以上',
					value: 3,
					checked: false
				}],
				heightData: [{
					title: '全部',
					value: 0,
					checked: false
				}, {
					title: '150-155cm',
					value: 1,
					checked: false
				}, {
					title: '155-160cm',
					value: 2,
					checked: false
				}, {
					title: '160-165cm',
					value: 3,
					checked: false
				}, {
					title: '165cm以上',
					value: 4,
					checked: false
				}],
				serveData1: [],

				form: {
					service_ids: "",
					age: "",
					height: "",
					condition: "",
					tag_id: ''
				},

				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},
		watch:{
			city(v1,v2) {
				this.init()
			}
		},
		computed: {
			...mapState(["tagData", "serveData"]),
		},
		onLoad(e) {
			console.log('tagData', this.tagData);
			this.serveData1 = Array.from(this.serveData);
			this.serveData1.unshift({
				name: '全部',
				id: 0,
			});
			this.init()
		},
		methods: {
			select(type, index) {
				console.log('type', type);
				let data = [];
				switch (type) {
					case
					1:
						this.form.age = this.ageData[index].value
						break;
					case
					2:
						this.form.height = this.heightData[index].value
						break;
					case
					3:
						this.form.service_ids = this.serveData1[index].id

						break;
					default:
						break;

				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.form = {
					service_ids: "",
					age: "",
					height: "",
					condition: "",
					tag_id: ''
				}

				this.popupShow = false
				console.log('close');
			},
			tagClick(item) {
				this.form.tag_id = item.id
				this.init();
			},
			tagClick1(index) {
				this.form.condition = index;
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.popupShow = false
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'hot': 1,
					'city':this.city
				};

				params = Object.assign(params, this.form)
				staffList({
					params
				}).then(res => {
					console.log(res.rows.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		margin: 30rpx 0;
		color: #FFD8B5;
	}

	.content {
		background-color: #fff;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		min-height: 1000rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;


		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.popup {
		position: relative;
		min-height: 800rpx;
	}

	.popup-title {
		text-align: center;
	}

	.popup-content {
		min-height: 300rpx;
		box-sizing: border-box;
	}

	.popup-content {
		padding: 30rpx;
	}

	.popup-btn {
		height: 100rpx;
	}

	.popup-left {
		background-color: #F5F5f5;
		border-bottom-left-radius: 30rpx;
	}

	.popup-right {
		background: linear-gradient(267deg, #A91D13 0%, #D02F2D 100%);
		color: #fff;
		border-bottom-right-radius: 30rpx;
	}

	.popup-label {
		width: 180rpx;
	}

	.popup-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>